<template>
  <el-dialog
    :title="dialogTitle"
    v-model="showDialog"
    draggable
    width="1024px"
    append-to-body
  >
    <!-- <el-scrollbar max-height="800px"> -->
    <div class="content-wrapper">
      <el-row :gutter="16">
        <el-col :span="8">
          <areaTypes />
        </el-col>
        <el-col :span="16">
          <weatherOptions />
        </el-col>
        <el-col :span="12">
          <areaLayout />
        </el-col>
        <el-col :span="12">
          <capacityLayout />
        </el-col>
      </el-row>
    </div>
    <!-- </el-scrollbar> -->
  </el-dialog>
</template>

<script setup>
import { ref, computed } from "vue";
import areaLayout from "./areaLayout.vue";
import areaTypes from "./areaTypes.vue";
import capacityLayout from "./capacityLayout.vue";
import weatherOptions from "./weatherOptions.vue";
const showDialog = ref(false);
const dialogTitle = ref("参数设置");
defineExpose({ open });
function open() {
  showDialog.value = true;
}
</script>

<style scoped>
@import "./style.css";
</style>
